<template>
  <!--投诉与意见页面-->
  <div>
    <ul style="padding-bottom: 60px;">
      <li v-for="(item,index) in questionList">
        <div class="title" @click="toggle(index,item.isShow)">
          <ul>
            <li>{{item.questionName}}</li>
            <li>{{item.createDate}}</li>
          </ul>
          <p><img src="../../../assets/select.png" alt="" width="20"></p>
        </div>
        <div class="content" v-show="item.isShow">
          <p class="question">{{item.questionContent}}</p>
          <p class="kefu">客服回复 <span>{{item.replyDate}}</span></p>
          <p class="answer">{{item.replyContent}}</p>
        </div>
      </li>
    </ul>
    <ul v-if="questionList.length<=0">
      <p class="null">可点击下方新建按钮提交投诉与建议</p>
    </ul>
    <router-link to="/newquestion" tag="p" class="offer">新建问题</router-link>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getQuestionListInfo} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'
  export default {
    name: '',
    props: {},
    data() {
      return {
        questionList: []

      };
    },
    methods: {
      toggle(index,isShow){
        this.questionList[index].isShow = !isShow;
      }
    },
    created() {
      getQuestionListInfo({}).then(res => {
        console.log(res);
        if (res.code == 100) {
          var questionList = res.object;
          for(let i in questionList){
            questionList[i]['isShow']=false;
          }
          this.questionList=questionList;
        } else {
          Toast.fail(res.info)
        }
      })
    },
    components: {}
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .offer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed,#61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
    z-index: 999;
  }
  .title{
    display: flex;
    padding: 10px;
    ul{
      flex: 0 90%;
      text-align: left;
      li:first-child{
        font-size: 16px;
        color: #111;
      }
      li:last-child{
        color: #999;
        font-size: 13px;
      }
    }
    p{
      line-height: 51px;
    }
  }
  .content{
    padding:0 10px;
    .question,.answer{
      padding: 20px;
      color: #111;
      border:1px solid #eee;
      line-height: 25px;
      text-align: left;
    }
    .answer{
      color: #2c92f0;
    }
    .kefu{
      font-size: 15px;
      color: #666;
      text-align: left;
      margin: 10px 0;
      span{
        float: right;
        font-size: 13px;
        color: #999;
      }
    }
  }
  .null{
    padding-top: 50%;
  }
</style>
